<template>
  <div class="register">
    <div class="title">
      <h2>教育后台管理系统</h2>
      <el-form ref="login" :model="user" :rules="rules">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="user.username" placeholder="请输入用户名">
            <template #prefix>
              <img src="../../assets/img/user.png" alt="" class="icon">
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="user.password" placeholder="请输入密码" show-password>
            <template #prefix>
              <img src="../../assets/img/pword.png" alt="" class="icon">
            </template>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item name="yanzm" >
          <el-input v-model="user.yanzm" placeholder="验证码">
            <template #prefix>
              <img src="../../assets/img/auth.png" alt="" class="icon">
            </template>
            <template #suffix>
              <img src="../../assets/img/verif.jpg" alt="">
            </template>
          </el-input>
        </el-form-item>
        <el-form-item name="radio" class="forget">
          <el-checkbox v-model="user" label="Option 1">记住用户名和密码</el-checkbox>
          <a href="#">忘记密码？</a>
        </el-form-item>
        <!-- 登录 -->
        <el-form-item>
          <el-button type="primary" class="but" @Click="submLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { isLogin } from '@a/index'
import useUserStorese from '@s/counter'
import { useRouter } from 'vue-router';
// 获取表单实例 
const user = ref({
  username: '',
  password: '',
  yanzm: ''
})
// 表单验证
const rules = {
  username: [
    {
      required: true,
      message: "用户名必填",
    },
  ],
  password: [
    {
      required: true,
      message: "密码必填",
    },
    {
      pattern: /^[a-zA-Z]\w{5,9}$/,
      message: "6-10位数字字母_组成并且以字母开头",
    },
  ],
}
// 点击登录
const router = useRouter()
const userStore = useUserStorese()
const login = ref(null)
let loginRef: any = null;
onMounted(() => {
  loginRef = login.value;
});

const submLogin = () => {
  loginRef.validate().then(() => {
    isLogin().then(res => {
      if (res.data.code === 200) {
        // 数据存储到pinia中
        userStore.INIT_INFO(res.data.data)
        const { token, role, userInfo }  = res.data.data;
        localStorage.setItem('token', token);
        localStorage.setItem('role', role);
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        ElMessage({
          message: '登录成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            router.replace('/')
          }
        })
      }
    })
  }).catch(() => {
    ElMessage({
      message: '登录失败',
      type:'error',
      duration: 1500
    })
  })
}
</script>

<style scoped lang="scss">
.register {
  height: 100vh;
  background-image: url(../../assets/img/login.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  position: relative;

  .title {
    width: 360px;
    position: absolute;
    top: 20%;
    left: 60%;
    background-color: #fff;

    h2 {
      text-align: center;
      margin: 20px auto;
      font-size: 22px;
    }
  }

  .el-form {
    width: 300px;
    margin-left: 30px;

    :deep .el-input__inner {
      height: 40px;
      padding-left: 10px;
    }

    .icon {
      width: 20px;
      height: 20px;
    }

    a {
      position: absolute;
      right: 0;
    }

    .but {
      width: 280px;
      height: 40px;
      margin-left: 10px;
    }
  }

}</style>